<template>
	<div class="center">
		<div class="top">
			<div class="bg-color-black">
				<chart :temperature="temperature" />
			</div>
			<div
				class="bg-color-black"
				style="display: flex; justify-content: center; align-items: center"
			>
				<dv-water-level-pond
					style="width: 300px; height: 300px"
					class="dv-wa-le-po"
					:config="waterData"
				/>
			</div>
			<div class="bg-color-black">
				<phChart :ph="ph"></phChart>
			</div>
		</div>
		<div class="bottom">
			<dv-border-box13>
				<div class="bg-color-black">
					<annularChart
						:tips="H2S"
						:range="3.5"
						:title="'硫化氢浓度'"
					></annularChart>
				</div>
				<div class="bg-color-black">
					<div class="flipper">
						<FlipperClockCom
							:hour="hour"
							ref="FlipperClockRef"
						></FlipperClockCom>
					</div>
					<div style="height: 70px">
						<div @click="pile" class="pile" style="margin-right: 35px">
							翻堆计时
						</div>
						<div @click="cancel" class="pile">结束计时</div>
					</div>
				</div>
				<div class="bg-color-black">
					<annularChart
						:tips="N2O"
						:title="'氧化亚氮浓度'"
						:range="1"
						:colorObj="{
							textStyle: '#67e0e3',
							series: {
								color: ['#faf3a378', 'transparent'],
								dataColor: {
									normal: '#ff9800',
									shadowColor: '#fcebad',
								},
							},
						}"
					></annularChart>
				</div>
			</dv-border-box13>
		</div>
	</div>
</template>

<script setup>
	import {
		defineProps,
		reactive,
		onMounted,
		ref,
		watch,
		computed,
		nextTick,
	} from 'vue'
	import Chart from '../center/chart/draw'
	import phChart from '../center/chart/phChart'
	import annularChart from '../center/chart/annularChart'
	import Flipper from '../../components/FlipperCom.vue'
	import { useStore } from 'vuex'
	import FlipperClockCom from '../../components/FlipperClockCom.vue'
	import { getTimeStamp, record, realtimeApi } from '../../apis/exampleApi'
	import { ElMessage } from 'element-plus'
	import request from '../../utils/request'

	const store = useStore()

	const temperature = ref(38.0)

	const ph = ref(38.0)

	const H2S = ref(0)

	const N2O = ref(0)

	const FlipperClockRef = ref()

	const waterData = reactive({
		data: [0],
		shape: 'round',
		formatter: '含水率：{value}%',
		waveNum: 3,
	})

	const props = defineProps({
		//子组件接收父组件传递过来的值
		hour: {
			type: String,
			default: '24',
		},
		isSetZero: {
			type: Boolean,
			default: false,
		},
	})

	// watch(props, (newProps) => {
	// 	newProps.hour
	// })

	// 初始化数据
	onMounted(() => {
		realtimeApi({ index: store.state.index })
			.then((res) => {
				temperature.value = res.data.temperature.toFixed(1)
				ph.value = res.data.PH.toFixed(1)
				N2O.value = res.data.N2O.toFixed(2)
				H2S.value = res.data.HS.toFixed(2)
				waterData.data.splice(0, 1, Number(res.data.water_content.toFixed(2)))
			})
			.catch((err) => {
				console.log(err)
			})
		FlipperClockRef.value.run()
	})

	setInterval(() => {
		realtimeApi({ index: store.state.index })
			.then((res) => {
				temperature.value = res.data.temperature.toFixed(1)
				ph.value = res.data.PH.toFixed(1)
				N2O.value = res.data.N2O.toFixed(2)
				H2S.value = res.data.HS.toFixed(2)
				waterData.data.splice(0, 1, Number(res.data.water_content.toFixed(2)))
			})
			.catch((err) => {
				console.log(err)
			})
	}, 2500)

	const pile = () => {
		if (FlipperClockRef.value.isF == false) {
			record({
				timestamp: parseInt(+new Date() / 1000) + parseInt(props.hour) * 3600,
				index: store.state.index,
			})
				.then((res) => {
					console.log(res)
				})
				.catch((err) => {
					console.log(err)
				})
			FlipperClockRef.value.run()
		}
		if (
			FlipperClockRef.value.timeCalculationStr != '000000' &&
			FlipperClockRef.value.isF == true
		) {
			ElMessage.warning('当前已经开始翻堆，如需取消请点击取消')
		}
	}

	const cancel = () => {
		FlipperClockRef.value.setZero()
	}
</script>

<style lang="scss" scoped>
	.center {
		display: flex;
		flex-direction: column;
		padding: 10px;
		width: 100%;
		height: 100%;

		.top {
			width: 100%;
			height: 40%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 10px;

			div {
				width: 32%;
				height: 100%;
			}

			.percent {
				width: 40%;
				display: flex;
				flex-wrap: wrap;
				.item {
					width: 50%;
					height: 120px;
					span {
						margin-top: 8px;
						font-size: 14px;
						display: flex;
						justify-content: center;
					}
				}
				.water {
					width: 100%;
					.dv-wa-le-po {
						height: 120px;
					}
				}
			}
		}

		:deep(.bottom) {
			width: 100%;
			height: 60%;
			padding: 10px;
			.border-box-content {
				padding: 25px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 100%;
				> div:nth-of-type(1) {
					width: 200px;
					height: 200px;
				}
				> div:nth-of-type(2) {
					width: 45%;
					height: 350px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					.flipper {
						display: flex;
						width: 100%;
						height: 100px;
						margin-bottom: 50px;
					}
					.pile {
						width: 140px;
						height: 65px;
						background-color: rgb(0, 0, 0);
						border: 4px solid rgba(104, 131, 214, 0.751);
						border-radius: 7px;
						font-size: 28px;
						font-weight: bolder;
						box-shadow: 0 0px 35px #28327d;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.pile:hover {
						background-color: rgba(57, 57, 57, 0.265);
						border: 6px solid #0c1d9e;
						box-shadow: 0 0px 25px #6b71a4;
						transition: all 0.4s ease;
						cursor: pointer;
					}
				}
				> div:nth-of-type(3) {
					width: 200px;
					height: 200px;
				}
			}
		}
		.bg-color-black {
			border-radius: 5px;

			> div {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
